<template>
  <div class="app-container">
    <el-form :inline="true" label-width="100px">
      <el-form-item label="供应商编号">
        <el-input
          v-model.trim="queryParams.providerNum"
          placeholder="请输入供应商编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-input
          v-model.trim="queryParams.providerName"
          placeholder="请输入供应商名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker
          v-model.trim="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>


      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          v-hasPermi="['purchase:provider:query']"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['purchase:provider:add']"
        >新增
        </el-button>
      </el-form-item>
    </el-form>

    <!--供应商详情表-->
    <el-table
      v-loading="loading"
      :data="providerList"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="供应商编号" align="center" prop="providerNum" sortable="custom" width="150px"/>
      <el-table-column label="供应商名称" align="center" prop="providerName"/>
      <el-table-column label="供应商类型" align="center" prop="providerType"/>
      <el-table-column label="有效期" align="center" prop="validDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.validDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批状态" align="center" prop="status" :formatter="providerStatusFormat" width="100"/>
      <el-table-column label="合格" align="center" prop="passStatus" :formatter="providerPassStatusFormat"/>
      <el-table-column label="操作人" align="center" prop="optByName" width="100"/>
      <el-table-column label="操作时间" align="center" prop="optDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.optDate,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250px">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status == '0'"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="handleStartProcess(scope.row)"
            v-hasPermi="['purchase:provider:submit']"
          >提交
          </el-button>
          <el-button
            v-if="scope.row.status !== '0'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['purchase:provider:view']"
          >查看
          </el-button>
          <el-button
            v-if="scope.row.status == '0'"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['purchase:provider:update']"
          >修改
          </el-button>
          <el-button
            v-if="scope.row.status == '0'"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['purchase:provider:delete']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form ref="provider" :model="provider" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商编号" prop="providerNum">
              <el-input v-model.trim="provider.providerNum" placeholder="供应商编号" maxlength="200" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="providerName">
              <el-input v-model.trim="provider.providerName" placeholder="请输入供应商名称" maxlength="200" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商类型" prop="providerType">
              <el-input v-model.trim="provider.providerType" placeholder="请选择供应商类型" maxlength="100" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效期" prop="validDate">
              <el-date-picker
                v-model="provider.validDate"
                type="date"
                placeholder="选择有效期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人" prop="contactList">
              <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddContact"
              >新增
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-table
                :data="provider.contactList"
                height="180px"
                border
              >
                <el-table-column label="联系人姓名" align="center">
                  <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.contactName" clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="联系人职位" align="center">
                  <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.contactPos" clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="联系电话" align="center">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :manual="true" content="请输入正确的手机号" v-model="disabled"
                                placement="right">
                      <el-input v-model.trim="scope.row.contactPhone" @blur="checkPhone(scope.row)"
                                maxlength="11" clearable></el-input>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDeleteContact(scope.$index)"
                      v-hasPermi="['system:post:remove']"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="provider.remark" type="textarea" placeholder="请输入内容" maxlength="250"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>

</template>


<script>
  import {getList, saveProvider, getProviderById, deleteProvider, startProviderProcess} from '@/api/purchase/provider'

  export default {
    name: "provider",
    data: function () {
      return {
        loading: false,
        total: 0,
        /*供应商流程状态*/
        providerStatus: [],
        /*供应商合格状态*/
        providerPassStatus: [],

        /*查询参数*/
        // 日期范围
        dateRange: [],
        queryParams: {
          providerNum: '',
          providerName: '',
          pageNum: 1,
          pageSize: 10
        },

        /*数据表格*/
        providerList: [],


        /*添加修改供应商*/
        open: false,
        title: '',

        disabled: false,
        // 表单参数
        provider: {
          id: '',
          contactList: [],
          providerNum: '',
          providerName: '',
          providerType: '',
          status: "",
          validDate: '',
          passStatus: ''
        },

        rules: {
          providerName: [
            {required: true, message: '供应商名称不能为空', trigger: 'blur'}
          ],
          providerType: [
            {required: true, message: '供应商类型不能为空', trigger: 'blur'}
          ],
          validDate: [
            {required: true, message: '有效期不能为空', trigger: 'blur'}
          ],
          contactList: [
            {required: true, message: '联系人不能为空', trigger: 'blur'}
          ],
        }


      }
    },

    methods: {
      getList() {
        this.loading = true;
        getList(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
          this.providerList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
      },


      /*查询*/
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      /*新增供应商*/
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = '新增供应商';
      },

      /*新增联系人*/
      handleAddContact() {
        let list = {
          contactName: this.contactName,
          contactPos: this.contactPos,
          contactPhone: this.contactPhone,
        };
        this.provider.contactList.push(list);
      },

      /*删除联系人*/
      handleDeleteContact(index) {
        this.provider.contactList.splice(index, 1);
      },

      /*校验手机号*/
      checkPhone(row) {
        let _this = this;
        let myReg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!myReg.test(row.contactPhone)) {
          _this.disabled = true;
        } else {
          _this.disabled = false;
        }
      },

      /*新增、修改保存*/
      submitForm() {
        let _this = this;
        this.$refs["provider"].validate(valid => {
          if (valid) {
            //校验手机号
            let myReg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
            for (let data of this.provider.contactList) {
              if (!myReg.test(data.contactPhone)) {
                this.$message.error('请输入正确格式的手机号');
                return;
              }
            }
            //保存
            if (_this.title === '新增供应商') {
              this.$confirm('是否确认新增供应商?', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
              }).then(function () {
                saveProvider(_this.provider).then(res => {
                  _this.open = false;
                  _this.getList();
                  _this.$message.success('新增供应商成功')
                }).catch(error => {

                })
              }).catch(e => {
              });
            } else {
              this.$confirm('是否确认修改供应商?', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
              }).then(function () {
                saveProvider(_this.provider).then(res => {
                  _this.open = false;
                  _this.getList();
                  _this.$message.success('修改供应商成功')
                }).catch(error => {

                })
              }).catch(e => {
              });
            }

          }
        });
      },

      cancel() {
        this.reset();
        this.open = false;
      },


      //修改供应商
      handleUpdate(row) {
        this.open = true;
        this.title = "修改供应商";
        let id = row.id;
        getProviderById(id).then(res => {
          this.open = true;
          this.provider = res.data;
        }).catch(error => {

        })

        this.provider = row;
      },

      /*提交*/
      handleStartProcess(row) {
        this.$confirm("确认要提交吗？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "info"
        }).then(function () {
          startProviderProcess(row).then(res => {

          }).catch(error => {
            console.log(error);
          })
        }).catch(e => e)
      },

      /*删除*/
      handleDelete(row) {
        let _this = this
        this.$confirm('是否确认删除供应商?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(function () {
          deleteProvider(row.id).then(res => {
            _this.$message.success('删除供应商成功')
            _this.getList();
          }).catch(error => {

          })
        }).catch(e => {
        })
      },


      // 表单重置
      reset() {
        this.provider = {
          id: undefined,
          status: undefined,
          passStatus: undefined,
          providerName: undefined,
          providerNum: undefined,
          providerType: undefined,
          validDate: undefined,
          remark: undefined,
          contactList: [],
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
        };
        this.resetForm("provider");
      },


      providerStatusFormat(row, column) {
        return this.selectDictLabel(this.providerStatus, row.status);
      },

      providerPassStatusFormat(row, column) {
        return this.selectDictLabel(this.providerPassStatus, row.passStatus);
      }


    },

    created() {
      this.getList();
      this.getDicts("provider_status").then(response => {
        this.providerStatus = response.data;
      });
      this.getDicts("provider_passStatus").then(response => {
        this.providerPassStatus = response.data;
      });


    },
  }
</script>

<style scoped>

</style>
